<template>
  <div class="top">
    <div class="nav">
      <div class="wrapper">
        <div class="content" v-for="(item,index) of ThisLi" @mouseenter="handleM(index)">
          <div :class="{thi:index===isclass}" >{{item.dec}}
          </div>
        </div>
        <router-link to="/baogao" tag="div">
        <span class="left">体检报告查询</span>
          </router-link>
      </div>
    </div>
    <div class="input" v-if="isclass==0">
      <div class="input-wrapper">
        <div class="input-new">
          <div class="i-w-s sf">快速预约体检套餐</div>
          <div class="i-w-s st"><span>价位</span><span class="two">|</span>
            <div class="twwo">
             <span>300~500元</span><span>500~1500元</span><span>1500元以上</span>
            </div>
          </div>
          <div class="i-w-s st"><span>性别</span><span class="two">|</span>
            <div class="choose">
              <span>男女通用   </span><div class="img"></div>
            </div>
            <div class="choose">
              <span>男性   </span><div class="img"></div>
            </div>
            <div class="choose">
              <span>女性    </span> <div class="img"></div>
            </div>
          </div>
          <div class="i-w-s st">
            <label  for="type">类型</label><span class="two sp">|</span><span class="dropdown"><div class="pchoose">请选择</div>
          <select id="type" >
            <option></option>
                <option>1</option>
                <option>2</option>
            </select>
          </span>

            <!--<div class="dropdown-content">-->
            <!--<a href="#">菜鸟教程 1</a>-->
            <!--<a href="#">菜鸟教程 2</a>-->
            <!--<a href="#">菜鸟教程 3</a>-->
            <!--</div>-->

          </div>
          <div class="i-w-s st  sfiv"><span>性质</span><span class="two">|</span>
            <div class="cd">
              <span>三甲医院</span><span>专业体检中心</span><span>公立医院</span></div>
            </div>
          <div class="i-w-s sl">搜索</div>
        </div>

      </div>
    </div>
    <div class="bottom">
      <swiper :options="swiperOption"  >
        <!-- slides -->
        <swiper-slide><img class="swiper-img " src="../assets/images2/7.jpg"  />
        </swiper-slide>
        <swiper-slide><img class="swiper-img" src="../assets/images2/7.jpg" /></swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>

      </swiper>
    </div>
  </div>


</template>


<script>
  export default {
    name: 'VScontent',
    data () {
      return {
        ThisLi:[{
          id:'0010',
          dec:'首页'
        },{
          id:'0011',
          dec:'体检机构'
        },{
          id:'0012',
          dec:'体检套餐'
        },{
          id:'0013',
          dec:'入职体检'
        },{
          id:'0014',
          dec:'Pet-ct检查'
      },{
          id:'0015',
          dec:'企业团检'
        },{
          id:'0016',
          dec:'我的服务'
        },{
          id:'0017',
          dec:'全球医疗'
        }
        ],
        isclass:0,
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
          pagination:{el:'.swiper-pagination',clickable: true},
          loop:true,
          freeMode:false,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }

    }

  },
    methods:{
      handleM(index){
        this.isclass=index

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .twwo{
    font-size: 14px;
    color: #80817e;
    width:76%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cd{
    font-size: 14px;
    color: #80817e;
    width: 76%;
    display: flex;
    justify-content: space-between;
  }
  .pchoose{
    float: left;
  }
  .choose{

    width: 23%;
    font-size: 14px;
    color: #80817e;
  }
  .input-new{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
  }

  .dropdown{

    width: 77%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  label{
    font-size: 14px;
    color: #80817e;
    float:left;
    outline: none;
  }
  .sp{

    float: left;
  }
  select{
    outline: none;
    border:none;
    width:67%;
  }
  option{
    list-style: none;

  }


  .sl{
    color: #fff;
    background: #00bfff;
  }
.img{
    height: 10px;
    width: 10%;
    border:1px solid #cdcfc9;
    display: inline-block;

  }
  .st .two{
    color: #00bfff;
  }
  .sf{
      font-size: 21px;
      color:#5d605c;


  }
  .st{
    border:1px solid #cdcfc9;
  }
  .st>span{

    font-size: 14px;
    color: #80817e;
  }
  .i-w-s{
    height: 13%;
    width: 80%;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;


  }
  .input{
    min-width: 423px;
    height: 81%;
    width: 25%;
    position: absolute;
    background-color: rgba(255,255,255,0.1);
    z-index: 100;
    text-align: center;
    left:10%;


  }
  .input-wrapper{
    height: 90%;
    width: 90%;
    background: #fff;
    display: inline-block;
    margin-top:4%;
    opacity: 1;



  }
  .thi{
    background:	#1E90FF;
  }
  .bottom{
    min-width: 1200px;
  }
  *{

    padding: 0;
  }
  .top{
    position: relative;
  }

  .top>>> .swiper-pagination-bullet-active{
    background: rgba(250,135,37);
    width: 15px;
    height: 15px;
  }
  .top>>> .swiper-pagination-bullet{
    background: rgba(250,135,37);
    width: 15px;
    height: 15px;
    margin-left:5px;
  }


  .swiper-img{
    width:100%;
    overflow:hidden
  }
  img{
   height: 110%;
   width: 110%;

 }
.nav{
  height: 60px;
  background-color: rgba(52,181,242);
  color:#fff;
  font-size: 20px;
  min-width: 1200px;
}
  .wrapper{
    width:80%;
    margin:0 auto;
    line-height: 60px;
    text-align: center;
    height: 100%;
    position: relative;
  }
  .content{
    float:left;
    height: 100%;
    width:10%;


  }
  li{
    margin:0px 25px 0px 25px;
    cursor:pointer;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;


  }
  .left{
    border:1px solid #fff;
    border-radius:5px;
    position: absolute;
    line-height: 45px;
    height: 74%;
    width: 11%;
    margin-top:10px;
  }
.swiper-button-next,
.swiper-button-prev{
  opacity: 0.5;
  color: aliceblue;
  margin:0 60px;
}
/*改变了颜色和加粗的样式*/

</style>
